<template>
  <div class="project-container" >
     <div class="header" >
       <div>
         <i class="el-icon-s-claim project-header-icon" ></i><span>待办事项</span>
       </div>
       <div class="project-header-all" ></div>
     </div>
     <div class="body" >
       <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          :show-overflow-tooltip="true"
          prop="title"
          label="任务">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="worker"
          label="协作者">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="primary" plain
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
     </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs
} from "vue";
export default {
  name: "sh-towork",
  setup() {
    const state = reactive({
      tableData: [{
        title: '植树节参加婚礼',
        worker: '寇寇,点点,阿珊'
      }, {
        title: '回家换尿不湿',
        worker: '哔哔,瑶瑶'
      }, {
        title: '书写悲惨人生',
        worker: '小油锤'
      }, {
        title: '参与东海大战',
        worker: '哪吒,敖丙'
      }]
    });
    return {
      ...toRefs(state)
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
span{
  padding: 0 5px;
}
.project-container{
  display: flex;
  flex-direction: column;
  background-color: $sidebar-bg;
  margin-top: 20px;
  width: calc((100vw - 256px - 34px - 24px - 20px) * 0.35);
  border: 1px solid $sidebar-border;
  .header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom:1px solid $sidebar-line;
    padding: 10px 20px;
    .project-header-icon{
      color: $orange-weight;
      background-color:rgba($color: $orange-light, $alpha: .4) ;
      padding: 5px;
      border-radius: 50%;
    }
    .project-header-all{
      color: $orange-weight;
    }
  }
  .body{
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    .card{
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid $sidebar-line;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .card-msg{
        margin-top: 2.5px;
        line-height: 10px;
        text-align: left;
        color: $black-light;
        p{
          color: #000;
          padding-left: 10px;
          display: flex;
        }
        span{
          padding: 0 2px 0 0;
        }
        p:first-child{
          .name{
            color: $blue-weight;
          }
          .desc{
            color: $blue-weight;
          }
        }
        p:last-child{
          font-size: 12px;
          color: $gray-weight;
        }

      }
    }
  }
}
</style>